<template>
  <div>
    <Row :gutter="20">
      <Col span="6">
        <Card>
          <div class="avatar">
            <img :src="this.userInfo.avatar" alt="">
          </div>
          <div class="basic-info">
            <div class="name">{{this.userInfo.name}}</div>
            <div class="email">{{this.userInfo.email}}</div>
          </div>
          <div class="group">
            <ul>
              <li>
                <span class="key">部门</span>
                <span class="value">
                   <a href="javascript:void(0)">{{this.userInfo.workspace}}</a>
                </span>
              </li>
              <li>
                <span class="key">角色</span>
                <span class="value">
                   <a href="javascript:void(0)">{{this.userInfo.role}}</a>
                </span>
              </li>
              <li>
                <span class="key">创建时间</span>
                <span class="value">
                  <a href="javascript:void(0)">{{this.userInfo.created_at}}</a>
                </span>
              </li>
            </ul>
          </div>
        </Card>
      </Col>
      <Col span="18">
        <Card>
          <Form ref="form" :model="formData" :label-width="80">
            <Row>
              <Col span="8">
                <FormItem label="账户密码">
                  <label>
                    <Input v-model="formData.password" type="password" clearable placeholder="请填写账户密码"/>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Button
              type="primary"
              size="large"
              @click="handleSubmit('form')">修改
            </Button>
          </Form>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import './index.less'
  import { changeInfo } from '@/api/user'

  export default {
    name: 'UserInfo',
    computed: {
      userInfo () {
        return this.$store.state.user.userInfo
      }
    },
    mounted () {
      console.log(this.userInfo)
    },
    data () {
      return {
        loading: true,
        formData: {
          password: '',
        },
      }
    },
    methods: {
      handleSubmit () {
        changeInfo(this.formData).then(res => {
          this.$Message.success(res.message)
          this.$store.dispatch('getUserInfo').then(user => {
            console.log(user)
          })
        })
      },
    }
  }
</script>

<style scoped>

</style>
